<script setup>
	import {
		computed,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	//、
	//、
	import {
		useUserStore
	} from '@/pages_nbst/store/user.js'
	import {
		getWrongQuestionStatReq,
		getWrongPointStatReq,
		getWrongPointQuestionReq
	} from "@/pages_nbst/api/my.js"
	//、
	const user = useUserStore()

	let onshow = true
	onLoad(q => {
		getStat()
		getPointStat()
		onshow = false
	})
	onShow(() => {
		if (onshow) {
			getStat()
			getPointStat()
		} else {
			onshow = true
		}
	})

	let params = {
		type: 0
	}
	const getStat = () => {
		getWrongQuestionStatReq().then(res => {
			total.value = res[0]
			total1.value = res[1]
		})
	}
	const getPointStat = () => {
		getWrongPointStatReq(params).then(res => {
			list.value = res
		})
	}

	// header --------
	const total = ref(0)
	const total1 = ref(0)

	// subsection --------
	const subsectionList = ref([])
	if (user.gradeId === 1) {
		subsectionList.value = ['教育综合']
	} else {
		subsectionList.value = ['教育综合', user.subject]
	}
	const subsectionCurrent = ref(0)
	const onHandleSubsectionChange = (v) => {
		if (subsectionCurrent.value !== v) {
			subsectionCurrent.value = v;
			params.type = v
			getPointStat()
		}
	}
	// subsection --------
	const list = ref([])
	const onClickReExam = (item) => {
		console.log(item);

		uni.navigateTo({
			url: '/pages_nbst/views/my/reexam?type=wrong',
			success: function(res) {
				getWrongPointQuestionReq({
					pointId: item.id
				}).then(list => {
					res.eventChannel.emit('acceptDataFromOpenerPage', {
						list: list.map(v => {
							v.question_detail.options.forEach(vv => {
								vv.answer = 0
							})
							return {
								id: v.id,
								pageId: v.page_id,
								examId: v.exam_id,
								bookQuestionId: v.book_question_id,
								questionId: v.question_detail.id,
								type: v.question_detail.type,
								content: v.question_detail.content,
								options: v.question_detail.options,
								analysis: v.question_detail.analysis,
							}
						})
					})
				})
			}
		})
	}
</script>

<template>
	<view style="background-color: #6f95c2;display: flex;justify-content: space-around;color: white;padding: 30rpx 0;">
		<view class="box1">
			<span style="font-size: 36rpx;">错题总数</span>
			<view>
				<span style="font-size: 46rpx;">{{total}}</span>
				<span style="font-size: 26rpx;"> 道</span>
			</view>
		</view>
		<view class="box1">
			<span style="font-size: 36rpx;">顽固错题数</span>
			<view>
				<span style="font-size: 46rpx;">{{total1}}</span>
				<span style="font-size: 26rpx;"> 道</span>
			</view>
		</view>
	</view>
	<view style="margin: 20rpx;">
		<uv-subsection :list="subsectionList" mode="subsection" :current="subsectionCurrent"
			@change="onHandleSubsectionChange" font-size="20" active-color="#6f95c2" />
	</view>
	<view v-if="list.length > 0"
		style="margin: 0 20rpx;padding: 20rpx;background-color: white;gap: 20rpx;display: flex;flex-direction: column;">
		<view style="display: flex;align-items: center;gap: 10rpx;">
			<image src="/pages_nbst/static/images/my/my-wrong-icon1.png" mode="widthFix"
				style="width: 50rpx;height: auto;"></image>
			<span>知识点</span>
		</view>
		<view v-for="item in list" class="box2" :key="item.id">
			<view style="color: #6f95c2;display: flex;flex-direction: column;gap: 6rpx;">
				<span style="font-size: 36rpx;font-weight: bolder;">{{item.label}}</span>
				<span style="font-size: 26rpx;">{{item.count}}道</span>
			</view>
			<view class="box-btn" @click="onClickReExam(item)">重新答题</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.box1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box2 {
		display: flex;
		justify-content: space-between;
		border: 1rpx lightgray solid;
		border-radius: 10rpx;
		padding: 20rpx 40rpx;
		align-items: center;
		
	}

	.box-btn {
		padding: 10rpx 20rpx;
		color: white;
		background-color: #6f95c2;
		border-radius: 10rpx;
		flex-shrink: 0;
	}
</style>
<style>
</style>